<template>
  <div class="evaluate">
    <div class="header">
      <image class="header_l" src="/static/images/img.png" alt=""/>
      <div class="header_r">
          <div class="header_info" v-for="(item,index) in list" :key="index" :style="rex==index?'color:red':''">
              <image class="header_l" :src="rex==index?item.eimg:item.img" alt="" @click="header(index)"/>
              <div class="title" >{{item.title}}</div>
          </div>
      </div>
    </div>
    <div class="content">
      <textarea class="textarea" name="" id="" placeholder="商品满足你的期待吗？说说它的优点和美中不足的地方吧！" placeholder-style="font-size:24rpx;color:#999"></textarea>
      <image class="content_img" src="/static/images/tianjiatupian.png" alt=""/>
    </div>
    <div style="width:100%;height:20rpx;background:#f5f5f5"></div>
    <div class="score">
      <image class="content_img" src="/static/images/pinpai.png" alt=""/>
      <div>店铺评分</div>
    </div>
    <div class="describe">
        <div>描述相符</div>
        <van-rate :value="value" @change="onChange" size="14" custom-class="start" color="#FF9E3D"/>
    </div>
    <div class="service">
        <div>物流服务</div>
        <van-rate :value="s_value" @change="onChange_s" size="14" custom-class="start" color="#FF9E3D"/>
    </div>
    <div class="attitude">
        <div>服务态度</div>
        <van-rate :value="a_value" @change="onChange_a" size="14" custom-class="start" color="#FF9E3D"/>
    </div>
    <div class="footer" :style="show==1?'color:red':''">
        <div class="footer_l" @click="footer">
           <image class="content_img" v-if="show==0?true:false" src="/static/images/niming_hui.png" alt=""/>
           <image class="content_img" v-if="show==1?true:false" src="/static/images/nimin.png" alt=""/>
           <div>匿名</div>
        </div>
        <div class="footer_r" @click="compilt">提交</div>
    </div>
  </div>
</template>

<script>

export default {
  data () {
    return {
        value: 0,
        s_value: 0,
        a_value: 0,
        rex:-1,
        show:0,
        list:[
          {img:'/static/images/haoping_weidian.png',eimg:'/static/images/haoping_dian.png',title:'好评'},
          {img:'/static/images/zhongping_weidian.png',eimg:'/static/images/zhongping_dian.png',title:'中评'},
          {img:'/static/images/chaping_weidian.png',eimg:'/static/images/chaping_dian.png',title:'差评'}
        ],
       
    }
  },
  methods: {
       onChange(event) {
         this.value = event.mp.detail
      },
      onChange_s(event) {
         this.s_value = event.mp.detail
      },
      onChange_a(event) {
        this.a_value = event.mp.detail
      },
      header(index){
        this.rex=index
      },
      footer(){
        if(this.show==0){
          this.show=1
        }else{
          this.show=0
        }
      },
      compilt(){
       
        wx.showToast({
            title: '提交成功',
            icon: 'success',
            duration:1000,
            success:function(){
              setTimeout(() => {
                wx.navigateBack({ 
                  delta: 1
                })
              }, 1000);    
            }
        });
      }
  },

  created () {
    // let app = getApp()
  }
}
</script>

<style scoped lang="less">
  .evaluate{
    width: 100%;
    .header{
      width: 100%;
      height: 172rpx;
      padding: 0 50rpx 0 30rpx;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-top:2rpx solid rgba(204,204,204,1);
      border-bottom:2rpx solid rgba(204,204,204,1);
      .header_l{
        width: 120rpx;
        height: 120rpx;
      }
      .header_r{
        width: 478rpx;
        height: 50rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .header_info{
          width: 122rpx;
          color: #333;
          font-size: 26rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;
          image{
            width: 50rpx;
            height: 50rpx;
          }
        }
      }
    }
    .content{
      width: 100%;
      height: 408rpx;
      padding: 14rpx 30rpx 0 30rpx;
      box-sizing: border-box;
      color: #333;
      font-size: 26rpx;
      .textarea{
        width: 100%;
        height: 144rpx;
      }
      image{
        width: 200rpx;
        height: 200rpx;
      }
    }
    .score{
      width: 100%;
      padding: 22rpx 0 40rpx 30rpx;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      color: #333;
      font-size: 26rpx;
      image{
        width: 32rpx;
        height: 32rpx;
        margin-right: 16rpx;
      }
    }
    .describe{
      width: 100%;
      padding:0 276rpx 0 30rpx;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      color: #333;
      font-size: 24rpx;
      .start{
        width: 500rpx;
      }
    }
    .service{
       width: 100%;
      padding:0 276rpx 0 30rpx;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      color: #333;
      font-size: 24rpx;
      margin: 22rpx 0;
      .start{
        width: 500rpx;
      }
    }
    .attitude{
       width: 100%;
      padding:0 276rpx 0 30rpx;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      color: #333;
      font-size: 24rpx;
      .start{
        width: 500rpx;
      }
    }
    .footer{
      position: fixed;
      bottom: 0;
      width: 100%;
      height: 80rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 26rpx;
      color: #333;
      border-top: 2rpx solid #ccc;
      .footer_l{
        width: 122rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-left: 30rpx;
        image{
          width: 50rpx;
          height: 50rpx;
        }
      }
      .footer_r{
        width:200rpx;
        height:80rpx;
        background:rgba(255,61,79,1);
        color: #fff;
        font-size: 30rpx;
        color: #fff;
        line-height: 80rpx;
        text-align: center;
      }
    }
  }
 
</style>
